<template>
  <div style="margin: 20px" />
  <el-form label-width="auto" :model="operInfo" style="max-width: 600px">
    <el-form-item label="登录账号">
      <el-input v-model="operInfo.adminname" class="myInput" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="operInfo.password" />
    </el-form-item>
    <el-form-item label="角色">
      <el-select v-model="operInfo.role">
        <el-option value="1" label="超级管理员"></el-option>
        <el-option value="2" label="轮播图维护人员"></el-option>
        <el-option value="3" label="商品维护人员"></el-option>
        <el-option value="4" label="售后人员"></el-option>
      </el-select>
    </el-form-item>
    <div>
      <el-tree
        ref="treeRef"
        style="max-width: 600px"
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        highlight-current
        :props="defaultProps"
      />
    </div>
    <el-form-item>
      <el-button class="loginBtn" type="primary" @click="addOper">
        添加
      </el-button>
      <el-button class="loginBtn" type="primary" @click="cancelFn">
        取消
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, defineEmits,ref } from "vue";
// import { useRouter } from "vue-router";
import { ElMessage,ElTree } from "element-plus";
import { addOperApi } from "~/admins";
import type { IOper } from "@/myTypes";
import data from "./menuData.ts"

const emit = defineEmits<{
  (e: "closeWin", isRefresh: boolean): void;
}>();

const treeRef = ref<InstanceType<typeof ElTree>>();

//在组合式api中，如果想要拿到路由对象，使用hooks ，useRouter

const operInfo = reactive<IOper>({
  adminname: "",
  password: "",
  role: "1",
});

// 添加操作人员
const addOper = () => {

  operInfo.checkedKeys = JSON.stringify(treeRef.value!.getHalfCheckedKeys().concat(
  treeRef.value!.getCheckedKeys(false)));

  addOperApi(operInfo).then((res) => {
    if (res.data.code === "200") {
      ElMessage.success("添加成功！");
      operInfo.adminname = "";
      operInfo.password = "";
      operInfo.role = "";
      emit("closeWin", true);
    }
  });
};

// 取消：
const cancelFn = () => {
  emit("closeWin", false);
};

// 树形结构（权限选择）


// const getCheckedNodes = () => {
//   console.log(treeRef.value!.getCheckedNodes(false, false));
// };
// const getCheckedKeys = () => {
//   console.log(treeRef.value!.getCheckedKeys(false));
// };
// const setCheckedNodes = () => {
//   treeRef.value!.setCheckedNodes(
//     [
//       {
//         id: 5,
//         label: "Level two 2-1",
//       },
//       {
//         id: 9,
//         label: "Level three 1-1-1",
//       },
//     ] as Node[],
//     false
//   );
// };
// const setCheckedKeys = () => {
//   treeRef.value!.setCheckedKeys(["3","2","5-1"], false);
// };
// const resetChecked = () => {
//   treeRef.value!.setCheckedKeys([], false);
// };

// const defaultProps = {
//   children: "children",
//   label: "label",
// };
</script>

<style scoped lang="scss"></style>
